import React from 'react';
import { Switch, Route } from 'react-router-dom';
import NoMatch from 'components/notMatch';

import menus from '../menus';

const getRoutes = (menus) => {
  let routes = [];
  menus.forEach(item => {
    let { path, component, children } = item;
    if (children) {
      routes = routes.concat(getRoutes(children));
    } else {
      routes.push({
        path,
        component,
      });
    }
  });
  return routes;
};

const routesData = getRoutes(menus);

const FrameContent = () => {
  return (
    <Switch>
      { routesData.map(item => (
        <Route
          path={ item.path }
          key={ item.path }
          component={ item.component }
          exact
        />
      )) }
      <Route component={ NoMatch } />
    </Switch>
  );
};

export default FrameContent;